<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { CorpusItem } from '@/types'
import EditPanel from './detail/EditPanel.vue'
import PaginationBar from '@/components/common/PaginationBar.vue'

const router = useRouter()

const props = defineProps<{
  list: CorpusItem[]
}>()

const emit = defineEmits(['item-check'])

const gotoDetail = () => {
  router.push('/knowledge/corpus/detail')
}

// 修改问答
// 定义数据类型接口
interface EditPanelData {
  question: string
  questionSimilar: string[]
  answer: string
  category: string
  updateDate: string
  hitCount: number
  validPeriod: string
  validTimeDateRange: []
}

const data = reactive<EditPanelData>({
  question: '远程抄报注册文件提示已过期',
  questionSimilar: [
    '不能抄报税，提示服务已过期，是什么意思?',
    '远程报税过期怎么办?',
    '抄报系统远程升级,整整快一天了,一直显示更新中，请稍后，然后就死机',
    '没有远程申报选项了',
    '抄报系统远程升级,整整快一天了,一直显示更新中',
    '远程报税过期怎么办?',
  ],
  answer:
    '2018.5.1之前生效的一般纳税人，升级之后税率选择中依然有17%及11%的选项。对于5月1日之前发行的并生效的一般纳税人，开票软件升级之后，还可以使用17%和11%税率开具红字发票和蓝字发票。 对于5月1日之后生效的一般纳税人，无法使用17%和11%税率。2018.5.1之前发生纳税义务，开具的发票要求请咨询当地主管税务机关，咨询按照哪种税率开具。 如仍有疑问请登录【金税在线客服-转人工】或拨打95113-1。',
  category: '全部分类',
  updateDate: '2019-01-01 11:30',
  hitCount: 12,
  validPeriod: '永久有效',
  validTimeDateRange: [],
})
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
  done()
}
</script>

<template>
  <div class="container">
    <el-scrollbar height="500px">
      <el-card style="border: none" shadow="never">
        <div>
          <el-divider style="margin-top: 0" />
        </div>
        <template v-for="item in props.list" :key="item.id">
          <div>
            <div class="card-item">
              <div class="left">
                <div class="left1">
                  <!-- 不符合单向数据流 v-model -->
                  <el-checkbox
                    v-model="item.checked"
                    @change="(e: boolean) => emit('item-check', item.id, e)"
                  />
                </div>
                <div class="left2" @click="gotoDetail">
                  <p class="question">问题：{{ item.question }}</p>
                  <p class="description">{{ item.description }}</p>
                  <p class="bottom">
                    <span class="category">分类：{{ item.category }}</span>
                    <span class="update-time">更新时间：{{ item.updateTime }}</span>
                    <span class="hit-count">命中次数：{{ item.hitCount }}</span>
                  </p>
                </div>
              </div>

              <div class="right">
                <el-button type="primary" link @click="dialogVisible = true">编辑</el-button>
                <el-button type="danger" link>删除</el-button>
              </div>
            </div>

            <el-divider />
          </div>
        </template>
      </el-card>

      <!-- 分页 -->
      <pagination-bar />
      <div style="height: 60px"></div>
    </el-scrollbar>

    <!-- 对话框 修改问答 -->
    <el-dialog
      v-model="dialogVisible"
      title="修改问答"
      width="800"
      align-center
      :before-close="handleClose"
    >
      <edit-panel :data="data" />
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">导出</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.card-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-item p {
  font-size: 0.9rem;
}

.card-item .question {
  font-weight: 900;
  margin-bottom: 5px;
}

.card-item .description {
  color: rgba(0, 0, 0, 0.447);
  margin-bottom: 20px;
}

.card-item .bottom {
  color: rgba(0, 0, 0, 0.447);
  font-size: 0.8rem;
}

.card-item .bottom span {
  display: inline-block;
}

.card-item .bottom .category {
  width: 150px;
}

.card-item .bottom .update-time {
  width: 200px;
}

.left {
  flex: 1;
  display: flex;
  align-items: center;
}

.left .left1 {
  margin-right: 20px;
}

.left .left2 {
  cursor: pointer;
  flex: 1;
}

/* 右侧按钮 */
.right {
  display: flex;
}
</style>
